import { Routes, Route } from "react-router-dom";
import Home from "@/pages/Home";
import RoleList from "@/pages/RoleList";
import RoleDetail from "@/pages/RoleDetail";
import About from "@/pages/About";
import Login from "@/pages/Login";
import Register from "@/pages/Register";
import RoleForm from "@/pages/RoleForm";
import Navbar from "@/components/Navbar";
import { useState } from "react";
import { AuthContext } from '@/contexts/authContext';

export default function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [selectedRole, setSelectedRole] = useState(null);

  const logout = () => {
    setIsAuthenticated(false);
  };

  return (
    <AuthContext.Provider
      value={{ isAuthenticated, setIsAuthenticated, logout }}
    >
      <div className="min-h-screen flex flex-col bg-gradient-to-b from-blue-50 to-white">
        <Navbar />
        <main className="flex-grow container mx-auto px-4 py-8">
          <Routes>
            <Route path="/" element={<Home selectedRole={selectedRole} setSelectedRole={setSelectedRole} />} />
            <Route path="/roles" element={<RoleList setSelectedRole={setSelectedRole} />} />
            <Route path="/roles/:id" element={<RoleDetail selectedRole={selectedRole} />} />
            <Route path="/about" element={<About />} />
            <Route path="/login" element={<Login />} />
            <Route path="/register" element={<Register />} />
            <Route path="/roles/new" element={<RoleForm />} />
            <Route path="/roles/edit/:id" element={<RoleForm />} />
          </Routes>
        </main>
      </div>
    </AuthContext.Provider>
  );
}
